<template>
  <div class="header">
    <div class="content">
      <div class="hint">
        <p>
          您上次训练的题库为:【常用智力测试题库】进度:0/13 点击此处快速继续训练
        </p>
      </div>
      <div class="inpt">
        <input type="text" placeholder="请选择分类" />
        <input type="text" placeholder="搜索题库名称" />
      </div>
      <el-table :data="arr" style="width: 100%">
        <el-table-column
          prop="name"
          label="题库名称"
          width="150"
        ></el-table-column>
        <el-table-column prop="classify" label="题库分类" width="200">
        </el-table-column>
        <el-table-column prop="num" label="试题数量" width="200">
        </el-table-column>
        <el-table-column prop="price" label="售价" width="200">
        </el-table-column>
        <el-table-column prop="time" label="创建时间" width="200">
        </el-table-column>
        <el-table-column prop="timeapp" label="更新时间" width="400">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, arr)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "BankView",
  data() {
    return {
      arr: null,
    };
  },
  methods: {
    async getadd() {
      let { data } = await axios.get("/api/back");
      console.log(data);
      this.arr = data;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  created() {
    this.getadd();
  },
};
</script>
<style scoped>
ul {
  list-style: none;
}
.header {
  width: 100%;
  height: 100%;
}

.content {
  width: 80%;
  background: #fff;
  margin: 50px 0 0 0;
}

.hint {
  width: 100%;
  height: 50px;
  background-color: #ffeded;
  color: red;
  line-height: 50px;
}

.hint p {
  padding-left: 20px;
}

.content .inpt {
  margin-top: 50px;
}

.content .inpt input {
  width: 200px;
  height: 40px;
  text-indent: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-right: 20px;
}

.content .name {
  width: 100%;
  margin: 50px 0 0 0;
}

.content ul li {
  float: left;
  font-weight: bold;
  margin-right: 140px;
}

.block {
  margin: 40px 0 0 200px;
}
</style>